<template>
	<view>
		<!-- <text class="title">获得售货员人脸信息</text>
		<camera v-if="!face_image" device-position="front" flash="auto" @error="error" style="width: 480rpx; height: 480rpx; border-radius: 240rpx; margin: 0 auto;">
		</camera>
		<image class="icon" :src="face_image" v-if="face_image"></image>
		
		<view class="btn" @click="setFace">确认</view> -->
		<!-- <view class="btn" @click="order">结算订单</view> -->
		<!-- <text class="description">点击录入即代表您已阅读并同意《用户隐私协议》</text> -->
		<text class="title">{{h_title}}</text>
		<camera 
		style="width: 480rpx; height: 480rpx; border-radius: 240rpx; margin: 0 auto;"
		v-if="!src" class="camera" device-position="back" frame-size="small" flash="off" binderror="error" ></camera>
		<image style="width: 480rpx; height: 480rpx; border-radius: 240rpx; margin: 0 auto; display: block;" mode="aspectFill" class="icon" :src="src" v-if="src"></image>
		<canvas class="canvas" :style="'height:'+windowHeight+'px;margin-top:'+windowHeight+'px;'" canvas-id="firstCanvas"></canvas>
		
		
	</view>
</template>
<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.title{
		font-size: 32rpx;
		text-align: center;
		display: block;
		margin: 100rpx 0;
	}
	// .icon{
	// 	display: block;
	// 	margin: 0 auto;
	// 	width: 480rpx; height: 480rpx;
	// 	border-radius: 50%;
	// }
	// .btn{
	// 	width: 594rpx;
	// 	height: 92rpx;
	// 	text-align: center;
	// 	line-height: 92rpx;
	// 	background-color: #2e8bf0;
	// 	color: #FFFFFF;
	// 	border-radius: 46rpx;
	// 	margin: 50rpx auto;
	// }
	// .description{
	// 	font-size: 24rpx;
	// 	color: #666666;
	// 	text-align: center;
	// 	display: block;
	// }
	// .scan-img{
	// 	opacity: 0.4;
	// 	width: 100%;
	// 	height:500upx;
	// }
	// .scan-text{
	// 	font-size: 20px;
	// 	text-align: center;
	// 	line-height: 60rpx;
	// }
	
	.camera {
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		z-index: 1;
	}
	
	.canvas {
		width: 100%;
		box-sizing: border-box;
		z-index: 0;
		position: fixed;
		bottom: 1000px;
	}
</style>
<script> 
	const app = getApp()
	let listener = ''
	export default {
		data() {
			return {
				src: "",
				status: {
					record: false,
					camera: 'back'
				}, 
				Bullet_frame: false,
				serintervalTime: null,
				device: true,
				speedMaxCount:60,
				windowHeight:500,
				goodsId:"",
				h_title:"销售人员认证"
				
			}
		},
		onShow(){
			
			let that = this
			const ctx = wx.createCameraContext()
			that.startTacking()//调用获取相机实时帧方法
			that.h_title= uni.getStorageSync('storage_key')==1 ? "销售人员认证" : '销售人员认证'
		},
		onLoad(options){
			console.log("12121",options.id);
			this.goodsId = options.id;
			this.h_title= uni.getStorageSync('storage_key')==1 ? "销售人员认证" : '销售人员认证'
		},
		methods: {
			startTacking() {
				var _that = this;
				var count = 0;
				const context = wx.createCameraContext();
				if (!context.onCameraFrame) {
					var message = '基础库 2.7.0 开始支持".';
					wx.showToast({
						title: message,
						icon: 'none'
					});
					return;
				}
				listener = context.onCameraFrame(function (res) { // 每秒60帧，这里控制每0.5获取一次图片 
					if (count < _that.speedMaxCount) {
						count++;
						return;
					}
					count = 0; 
					_that.jschangeDataToBase64(res)
					console.log('00001')
				});
				// start
				listener.start();
				
			},
			
			jschangeDataToBase64(frame) {
				var data = new Uint8Array(frame.data);
				var clamped = new Uint8ClampedArray(data);
				let that = this 
				var contex = wx.createCanvasContext('firstCanvas')
				wx.canvasPutImageData({
					canvasId: 'firstCanvas',
					x: 0,
					y: 0,
					width: frame.width,
					height: frame.height,
					data: clamped,
					success(res) {
						console.log(res); 
						wx.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: frame.width,
							height: frame.height,
							canvasId: 'firstCanvas',
							fileType: 'png',
							destWidth: frame.width,
							destHeight: frame.height,
							quality: 0.8,
							success(res) {
								let oddurl = res.tempFilePath
								console.log('0002')
								that.detectLiveFace(res.tempFilePath)
							}
						}, that)
					},
					fail(res) {
						console.log('调用失败', res)
					}
				})
			},
			// 结束相机实时帧
			stopTacking() {
				if (listener) {
					listener.stop();
				}
			},
			// 开始相机实时帧
			startcamera:function(){
				if(listener){
					listener.start()
				}
			},
			detectLiveFace:function(url){
				console.log(url);
				let that = this;
				this.$u.api.uploadFile({
					url:'user/upload/one?app=saleface',
					filePath: url,
					name: 'file',
					success:uploadRes => {
						console.log("服了1",uploadRes);
						if(uploadRes.code == 0){
							// this.$u.toast(res.msg); return;
							uni.navigateTo({
								url:"/pages/order/confirma"
							})
						}else{
							if(uploadRes.data.entityId){
								this.src = url;
								// this.$u.http.get("order/order/update",{
								// 	// order_sn:this.order_sn,
								// 	entity_id:uploadRes.data.entityId
								// }).then(res => {
								// 	that.stopTacking();
								// 	uni.navigateTo({
								// 		url:"/pages/order/confirm?order_sn=" + this.order_sn
								// 	})
								// 	// this.face_image = uploadRes.data.preview_url;
								// })
								
								that.stopTacking();
								if(uploadRes.data.msg=="非授权人!"){
										// this.$u.toast(res.msg); return;
										uni.navigateTo({
											url:"/pages/order/confirma"
										})
								}
								uni.navigateTo({
									url:"/pages/order/confirm?id=" + this.goodsId + "&entity_id=" + uploadRes.data.entityId
								})
							}
						}
					},
					complete:res => {
							console.log("上传图片失败了",res);
						uni.hideLoading();
					}
				});
			},
		
			  
			setFace(){
				uni.showLoading();
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.$u.api.uploadFile({
							url:'user/upload/one?app=saleface',
							filePath: res.tempImagePath,
							name: 'file',
							success:uploadRes => {
								if(uploadRes.code == 0){
									this.$u.toast(res.msg)
								}else{
									
									this.$u.http.get("order/order/update",{
										order_sn:this.order_sn,
										entity_id:uploadRes.data.entityId
									}).then(res => {
										uni.navigateTo({
											url:"/pages/order/confirm?order_sn=" + this.order_sn
										})
										this.face_image = uploadRes.data.preview_url;
									})
								}
							},
							complete:res => {
								uni.hideLoading();
							}
						});
					}
				});
				
			}
		}
	}
</script>

<style>

</style>
